<!--前端插件扩展-->
<template>
  <div>
    <ZTitle title="前端插件" />
    <div class="tools_box">
      <div class="lt">
        <el-input placeholder="请输入关键字" v-model="keyword" class="input-with-select">
          <el-select v-model="selected" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="rt">
        <div class="more">
          <span>更多</span>
          <span class="el-icon-more"></span>
        </div>
      </div>
    </div>
    <div class="plugins_list">
      <div class="plugin_item">
        <template v-for="item in 10">
          <Item :key="item" />
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import Item from "./pugItem";

export default {
  components: {
    Item,
  },
  data() {
    return {
      keyword: "",
      selected: "",
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.tools_box {
  background-color: #fff;
  padding: 20px 15px;
  border-bottom: 1px solid #ddd;
  .lt {
    width: 300px;
    display: inline-block;
  }
  .rt {
    float: right;
    .more {
      margin-top: 9px;
      font-size: 14px;
      color: #787878;
      cursor: pointer;
      &:hover {
        color: $primary_clr;
      }
    }
  }
}
</style>